什麼是 CSS 預處理器？

• CSS 預處理器是一種擴展 CSS 功能的工具，讓開發者可以使用變數、函數、嵌套等功能來簡化編寫 CSS 的過程，並最終編譯成標準的 CSS。
• 常見的 CSS 預處理器包括 Sass、LESS 和 Stylus，其中 Sass 是最受歡迎的選擇。

Sass 是什麼？

• Sass (Syntactically Awesome Stylesheets) 是一種強大的 CSS 擴展語言，允許你使用變數、嵌套、部分檔案、混入等功能來改善你的 CSS 編寫流程。
• Sass 有兩種語法：
  1. SCSS (Sassy CSS)： 這是最常用的語法，與 CSS 的語法幾乎相同，但增加了 Sass 的擴展功能。
  2. Sass 語法： 使用縮排來表示嵌套，不使用大括號 {} 和分號 ;，更簡潔，但不如 SCSS 常用。

安裝 Sass

安裝 Sass 有多種方式，最簡單的是使用 npm（Node Package Manager）來安裝。

• 步驟 1：安裝 Node.js

  • 要安裝 Sass，你需要先安裝 Node.js。Node.js 附帶 npm，讓你可以方便地安裝 Sass。
  • 根據你的作業系統下載並安裝 Node.js。

• 步驟 2：使用 npm 安裝 Sass

  1. 打開終端（Windows 使用 CMD 或 PowerShell，macOS 和 Linux 使用 Terminal）。

  2. 執行以下命令來檢查是否已經安裝 npm：

     npm -v
     

     如果顯示版本號，表示你已經安裝好 npm。

  3. 使用 npm 安裝 Sass：

     npm install -g sass
     

     這將在全域安裝 Sass，使其可以在任何專案中使用。

• 步驟 3：檢查 Sass 是否安裝成功
  執行以下命令來確認安裝是否成功：

  sass --version
  

  如果顯示 Sass 的版本號，則表示安裝成功。

使用 Sass 編譯 SCSS

• 創建一個 .scss 檔案，並在其中撰寫 Sass 代碼。
• 使用以下命令編譯 SCSS 檔案為 CSS：

  sass input.scss output.css
  

  這將編譯 input.scss 檔案並生成一個 output.css 檔案。

Sass 編譯器的監聽模式

如果你不想每次手動編譯檔案，可以使用 Sass 的監聽模式。這樣 Sass 會自動檢測 SCSS 檔案的變更並即時編譯。

sass --watch input.scss:output.css

安裝 Sass 的其他方法

• 安裝 GUI 工具：如果你不習慣使用命令列，可以安裝像 Prepros 這樣的圖形化界面工具來編譯 Sass。
• 使用 Online 編譯器：你可以使用像 SassMeister 這樣的在線編譯工具來立即查看 Sass 編譯結果。